<template>
  <div class="login">
      <h2 class="title">欢迎来到拼多多管理平台</h2>
      <div class="login_user">用户登录</div>
    <Form ref="formInline" :model="formInline">
      <FormItem prop="user">
        <Input type="text" v-model="formInline.uname" placeholder="请输入用户名"/>
          <Icon type="ios-person-outline" slot="prepend"></Icon>
      </FormItem>
      <FormItem prop="password">
        <Input type="password" v-model="formInline.upwd" placeholder="请输入密码"/>
          <Icon type="ios-lock-outline" slot="prepend"></Icon>
      </FormItem>
      <FormItem style="text-align: center">
        <Button type="primary" @click="handleSubmit">登录</Button>
        <Button style="margin:10px">重置</Button>
      </FormItem>
    </Form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formInline: {
        uname: "",
        upwd: ""
      },
      
      
    };
  },
  methods: {
    handleSubmit() {        
      this.$axios({
          url:"/admin/account/login",
          method:"post",
          data:this.formInline,
          withCredentials:true
      }).then((res)=>{
          let message = res.data.message
          if (res.data.status == 0) {
              this.$Message.success("登录成功")
              this.$store.commit("setUser",{
                  username:message.uname,
                  realname:message.realname
              })
          }else{
              this.$Message.error(message);
          }
      })
    }
  }
};
</script>
<style>
.title{
    text-align: center;
    font-size: 22px;
    padding-bottom: 30px;
}
.login {
  width: 400px;
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
}
.login .ivu-form-item {
  height: 35px;
  line-height: 35px;
  margin: 12px;
}
.login .ivu-input {
  height: 100%;
  font-size: 16px;
}
.login .ivu-input-group {
  height: 100%;
}
.login .ivu-form-item-content {
  height: 100%;
}
.login_user{
    text-align: center;
    font-size: 20px;
    color: #333;
}
</style>


